<template>
  <div class="app">
    <div class="contener boderSet">
      <div class="crumbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">基础设置</el-breadcrumb-item>
          <el-breadcrumb-item>资产存放地点设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <h4>存放地点列表</h4>
      </div>
      <div class="searchField">
        <el-row :gutter="20">

          <el-col :span="4">
            <el-button style="
              border-radius: 10px;
                width: 110px;
                padding: 12px;
                background-color: #343961;
                border: 0px;
                /* margin-bottom: 100px; */
                position: absolute;
              " type="primary" icon="el-icon-plus" size="" @click="add">
              新增地点</el-button>
          </el-col>
          <el-col :span="12">
            <el-form :inline="true" :model="StorageSite" class="demo-form-inline" ref="StorageSite">

              <el-input placeholder="请输入存放关键字" v-model="StorageSite.storageSite" class="input-with-select"
                style="width:350px">

                <el-button slot="append" class="querybtn" type="primary" size="medium" @click="submitSearch()"
                  @clear="findUserList"><span class="s2">查询</span>
                </el-button>
                <!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
              </el-input>

              <!-- <el-form-item  prop="StorageSite">
                <el-input v-model="StorageSite.storageSite" placeholder="请输入存放关键字"></el-input>
              </el-form-item>

              <el-button class="querybtn" type="primary" size="medium" @click="submitSearch()" @clear="findUserList"><span class="s2">查询</span>
              </el-button> -->
            </el-form>
          </el-col>

          <el-col :span="8">
            <el-button style="color: #343961;border: 1px solid #343961;"
          @click="exportExcel()">导出Excel</el-button>
          </el-col>
        </el-row>


        <!-- <el-button style="
               border-radius: 10px;
              width: 110px;
              padding: 12px;
              background-color: #343961;
              border: 0px;
              /* margin-bottom: 100px; */
              position: absolute;
            " type="primary" icon="el-icon-plus" size="" @click="add">
          新增地点</el-button>
        <el-form style="margin-left: 150px; margin-top: -40px; position: absolute;" :inline="true" :model="StorageSite"
          class="demo-form-inline" ref="StorageSite">

          <el-form-item  prop="StorageSite">
            <el-input v-model="StorageSite.storageSite" placeholder="请输入存放关键字"></el-input>
          </el-form-item>

          <el-button class="querybtn" type="primary" size="medium" @click="submitSearch()" @clear="findUserList"><span class="s2">查询</span>
          </el-button>
        </el-form> -->
        <!-- <el-button style="position: absolute;right: 100px;top: 130px;color: #343961;border: 1px solid #343961;"
          @click="exportExcel()">导出Excel</el-button> -->
      </div>
      <div class="contenList">



        <el-table :data="userList" id="userlist" style="width: 100%; text-align: center">
          <el-table-column prop="id" label="序号" width="100" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column prop="storageSite" label="存放地点" width="400" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.storageSite }}
            </template>
          </el-table-column>
          <el-table-column prop="storageSiteNumber" label="地点编号" width="200" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.storageSiteNumber }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" width="300" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button style="background-color: rgb(71, 139, 191); border: 0px" type="primary" icon="el-icon-edit"
                circle @click="handleEdit(scope.$index, scope.row)"></el-button>
              <el-button type="danger" header-align="center" align="center" icon="el-icon-delete" circle
                @click="remove(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <!-- <el-pagination
          header-align="center"
          align="center"
          class="page"
          background
          layout="->,prev, pager, next, jumper, total"
          :total="1000"
        >
        </el-pagination> -->

        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="storageDto.page"
          :page-size="storageDto.limit" :total="storageDto.total" layout="->,prev, pager, next, jumper, total">
        </el-pagination>
      </div>
    </div>

    <!--新增地点模态框-->

    <div>
      <el-dialog title="新增存放地点" :visible.sync="dialogFormVisible" customClass="customwidth">
        <el-form :model="userInfo">
          <el-form-item label="地点Id" :label-width="formLabelWidth">
            <el-input style="width: 200px" v-model="userInfo.id" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="地点名称" :label-width="formLabelWidth">
            <el-input style="width: 200px" v-model="userInfo.storageSite" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地点编号" :label-width="formLabelWidth">
            <el-input style="width: 200px" v-model="userInfo.storageSiteNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" type="primary" @click="dialogFormVisible = false">取 消</el-button>
          <el-button class="confirm" type="primary" style="margin-right: 50px" @click="submitUser">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import infras from "@/serive/Infrastructure";
import toExcel from "@/utils/toExcel"
export default {
  data() {
    return {
      id: '',
      storageSite: '',
      storageSiteNumber: '',
      input: "",
      userInfo: {
        id: '',
        storageSite: '',
        storageSiteNumber: ''

      },
      dialogTitle: "增加",
      rowIndex: null,
      storageDto: {
        name: '',
        page: 1,
        limit: 10,
        total: 0,
      },
      userList: [],
      dialogFormVisible: false,
      formLabelWidth: "80px",
      StorageSite: {
        id: '',
        storageSite: '',
        storageSiteNumber: ''
      },
    };
  },
  methods: {

    submitSearch() {
      console.log("查询");
      console.log(this.StorageSite)
      infras.findStorageByName(this.StorageSite).then((res) => {
        this.userList = res.data.data
        this.storageDto.total = res.data.count
        // console.log(this.userList);
      });
    },

    // 清空查询参数
    clearForm(formName) {
      this.$refs[formName].resetFields();
      this.findUserList()
    },

    // 切页
    handleCurrentChange(page) {
      this.storageDto.page = page
      this.findUserList()
    },

    findUserList() {
      infras.findUserList(this.storageDto).then((res) => {
        this.userList = res.data.data
        this.storageDto.total = res.data.count
        console.log(this.storageDto.total);
      })
    },

    // 增加按钮
    add() {
      this.dialogTitle = "增加";
      this.userInfo = {};
      this.dialogFormVisible = true;
    },


    //模态框确定按钮
    submitUser() {
      if (this.dialogTitle === "编辑") {
        console.log("222");
        //调用编辑接口
        infras.storageUpdate(this.userInfo).then((_) => {
          this.$message({
            type: 'success',
            message: '修改成功',
          })
          this.findUserList()
        });
        // this.findUserList()
        this.dialogFormVisible = false;
        return;
      }
      console.log("111");

      //调用增加接口

      infras.storageAdd(this.userInfo).then((_) => {
        this.$message({
          type: 'success',
          message: '添加成功',
        })
        this.findUserList()
      });
      this.dialogFormVisible = false;
    },

    // table表编辑按钮设置
    handleEdit(index, row) {
      this.dialogTitle = "编辑";
      this.userInfo = Object.assign({}, row); //浅拷贝防止表格跟随弹窗变化
      this.dialogFormVisible = true;
      this.rowIndex = index;
    },

    // 删除
    remove(id) {
      // 调用删除接口
      infras.delStorage(id).then((_) => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
        this.findUserList()
      })
    },


    exportExcel() {
      if (this.userList.length < 1) {
        this.$message({
          message: "请选择需要导出的内容",
          type: "error",
          center: true
        })
        return false
      }
      toExcel.getExcel("#userlist", "资产存放地点数据")
    }

  },
  created() {
    if (this.StorageSite.storageSite == undefined) {
      this.findUserList();
    }
    this.findUserList();
  },

};
</script>

<style>
.contener {
  margin: 20px 30px;
  padding: 30px;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h4 {
  font-size: 24px;
}

.searchField {
  margin-top: 20px;
}

.contenList {
  margin-top: 20px;
 
}

.el-table{
  box-shadow: 0px 20px 50px 0px rgba(191, 21, 108, 0.05);
  border-radius: 20px;

}

.crumbs {
  margin-bottom: 20px;
}

.text {
  margin-left: 65px;
}

.tab {
  margin-left: 20px;
  width: 350px;
}

.querybtn {
  /* margin-left: 20px; */
  background-color: #343961 !important;
  /* color: red; */
  border: 0px;
  /* margin-top: 2px; */
}

.page {
  margin-top: 20px;
}

.customwidth {
  width: 25% !important;
  /* min-width: 100px !important */
  border-radius: 10px;
}

.dialog-footer {
  /* border: 1px solid red; */
  margin-right: 80px;
}

.el-pagination {
  margin-top: 15px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #343961;
  /* color: #fff; */
}

.cancel,
.confirm {
  background-color: #343961;
  border: 0px;
  border-radius: 10px;
}

.s2 {
  color: white;
}
</style>